import React from 'react'
import { connect } from 'react-redux'
import { Tabs, SearchBar } from 'antd-mobile-v2';
import './Classify.scss'

import LayoutScroll from '@/components/LayoutScroll/LayoutScroll'

const mapStateToProps = (state) => { // 配置需要接收的数据
    // console.log(state);
    return {
        num: state.classify.num,
        loading: state.loading.effects['Classify/asyncAdd'] // 指定异步加载调用的方法路径放在数组中
    };
}

const connector = connect(mapStateToProps)  // 调用connect包裹

class Classify extends React.Component {

    state = {
        newNumber: 50
    }

    componentDidMount() {
        console.log('Classify');
    }

    componentDidUpdate() {
        // console.log('C改变了');
    }

    // d登陆
    onLogin = async () => {
        const res = await this.$get_request(this, {}, '测试请求', 'classify', 'channels')
        console.log(res)
        localStorage.setItem('boke_city', 'boke_city')
    }

    asyncAdd = () => {
        // console.log(this.props);
        const { dispatch } = this.props;
        //   console.log('我点击了',dispatch);
        dispatch({
            type: 'classify/asyncAdd',
            payload: {
                num: 5
            }
        })
    }

    changeTheme = (theme) => {
        // console.log(theme);
        window.document.documentElement.setAttribute('data-theme', theme)
    }
    getSnapshotBeforeUpdate(prevProps) {
        //   console.log(prevProps, 1111111);
        if (prevProps.num !== this.props.num) {
            this.setState({
                newNumber: 100
            })
        }
        return this
    }
    renderContent = tab =>
    (<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', backgroundColor: '' }}>
        <p>Content of {tab.title}</p>
    </div>);

    render() {
        const tabs = [
            { title: '全部' },
            { title: '后端' },
            { title: '前端' },
            { title: '数据库' },
            { title: '服务器' },
            { title: '项目优化' },
            { title: 'AI智能' },
            { title: '常见错误' },
            { title: '游戏开发' },
        ];




        

        return (
            <LayoutScroll name={'Classify'}>
                <div className="classIfy">
                    <SearchBar placeholder="Search" maxLength={8} />
                    <Tabs tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={5} />}>
                        {this.renderContent}
                    </Tabs>
                </div>
            </LayoutScroll>
        )
    }
}

export default connector(Classify)